<template>
  <!-- 菜单管理 -->
  <div class="menuManage">
    <div class="leftContent">
      <div class="treeTit">
        角色组列表
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          class="addTopMenu"
          @click="handleBtn('roleGroup')"
          >新增角色组</a-button
        >
      </div>
      <div class="roleGroup">
        <a-spin :spinning="loading">
          <div class="roleGroupItem" v-for="item in roleGroup" :key="item">
            <div
              :class="item.checked ? 'roleGroupName active' : 'roleGroupName'"
              @click="getRoleList(item.id)"
            >
              {{ item.name }}
            </div>
            <div class="editBtn">
              <EditOutlined
                class="addBtn"
                @click="handleEdit(item, 'roleGroup')"
              />
              <a-popconfirm
                ok-text="确认"
                cancel-text="取消"
                @confirm="handleDel(item)"
              >
                <template #title> 是否确定删除该角色组? </template>
                <DeleteOutlined class="delBtn" />
              </a-popconfirm>
            </div>
          </div>
        </a-spin>
      </div>
    </div>
    <div class="rightContent" v-if="tableData.length">
      <div class="treeTit">
        新增角色
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          class="addTopMenu"
          @click="handleBtn('role')"
          >新增角色</a-button
        >
      </div>
      <div class="tableContent">
        <a-table
          :dataSource="tableData"
          :columns="columns"
          size="small"
          :scroll="{ x: 'max-content' }"
          @resizeColumn="handleResizeColumn"
          :pagination="false"
          :loading="tableLoading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'handle'">
              <a-button
                type="link"
                @click="handleEdit(record, 'role')"
                :disabled="record.defaultRole"
                >编辑</a-button
              >

              <a-popconfirm
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirmRoleDel(record)"
                :disabled="record.defaultRole"
              >
                <template #title> 是否确定删除该角色？ </template>
                <a-button type="link" danger :disabled="record.defaultRole"
                  >删除</a-button
                >
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
  <!-- 按钮 -->
  <AddRole
    :addRoleVisible="addRoleVisible"
    :rowData="rowData"
    :isEdit="isEdit"
    :handleType="handleType"
    :selectedRoleGroup="selectedRoleGroup"
    @update:addRoleVisible="addRoleVisible = $event"
    @getRoleGroupList="getRoleGroupList"
    @getRoleList="getRoleList"
  />
</template>
<script setup>


import AddRole from "./conpoments/addRole.vue";
const $api = inject("$api");
const filterForm = ref({
  current: 1,
  size: 10,
});
const roleGroup = ref([]);
const columns = ref([
  {
    title: "角色名称",
    dataIndex: "name",
    key: "name",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "角色编码",
    dataIndex: "code",
    key: "code",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 120,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]);
const tableData = ref([]);
const rowData = ref({});
const isEdit = ref(false);
const total = ref(0);
const addRoleVisible = ref(false);
const handleType = ref("");
const loading = ref(false);
const handleBtn = (type) => {
  isEdit.value = false;
  handleType.value = type;
  addRoleVisible.value = true;
};
const handleEdit = (data, type) => {
  isEdit.value = true;
  handleType.value = type;
  rowData.value = data;
  addRoleVisible.value = true;
};
const handleDel = async (data) => {
  const res = await $api.roleDel(data.id);
  if (res && res.code === 0) {
    message.success("删除成功");
    getRoleGroupList();
  }
};
const getRoleGroupList = async () => {
  loading.value = true;
  const res = await $api.roleList({
    roleType: 2, // 角色类型 1：企业角色 2：内部角色组 3：内部子角色
  });
  loading.value = false;
  if (res && res.code === 0) {
    roleGroup.value = res.data;
  }
};
const tableLoading = ref(false);
const selectedRoleGroup = ref("");
const getRoleList = async (id) => {
  selectedRoleGroup.value = id;
  roleGroup.value.forEach((item) => {
    item.checked = false;
    if (item.id === id) {
      item.checked = true;
    }
  });
  if (id) {
    tableLoading.value = true;
    const res = await $api.roleList({
      roleType: 3, // 角色类型1：企业角色 2：内部角色组 3：内部子角色
      roleGroupId: id,
    });
    tableLoading.value = false;
    if (res && res.code === 0) {
      tableData.value = res.data;
    }
  }
};
const confirmRoleDel = async (data) => {
  const res = await $api.roleDel(data.id);
  if (res && res.code === 0) {
    message.success("删除成功");
    getRoleList(selectedRoleGroup.value);
  }
};
onMounted(async () => {
  getRoleGroupList();
});
</script>
<style lang="less" scoped>
.leftContent,
.rightContent {
  display: inline-block;
  height: 100vh;
  box-sizing: border-box;
  background: #141414;
  overflow-y: auto;
}
.leftContent {
  width: 400px;
  margin-right: 20px;
}
.rightContent {
  width: calc(100% - 420px);
}
.treeTit {
  font-size: 18px;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #333;
  position: relative;
  padding: 0 20px;
}
.formContent,
.tableContent {
  padding: 20px;
}
.addTopMenu {
  background-color: green;
  color: white;
  vertical-align: middle;
  position: absolute;
  right: 20px;
  top: 19px;
  &:hover {
    background-color: #529b2e;
  }
}
.roleGroupName {
  cursor: pointer;
  display: inline-block;
}
.active {
  background-color: #1568dc;
  padding: 0 10px;
  border-radius: 4px;
  margin-left: -10px;
}
.saveBtn {
  position: absolute;
  right: 20px;
  top: 19px;
}
.editBtn {
  position: absolute;
  right: 0;
}
.addBtn,
.delBtn {
  font-size: 16px;
  margin-left: 10px;
  cursor: pointer;
}
.addBtn {
  color: #1655ad;
}
.delBtn {
  color: red;
}
.ant-input-number {
  width: 100%;
}
.roleGroup {
  padding: 20px 20px 20px 40px;
}
.roleGroupItem {
  height: 40px;
  line-height: 40px;
  position: relative;
  margin-bottom: 10px;
}
.editBtn {
  position: absolute;
  top: 0;
  right: 0;
}
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
</style>